.diff-bracket {
  font-family: monospace;
  color: #aaa;
}

.diff-line {
  display: block;
  min-width: 100%;
  box-sizing: border-box;
  padding-left: 16px;
  font-size: 12px;
  line-height: 18px;
  color: #444;
}
.diff-line .key {
  color: #9c913b;
}
.diff-line.added .key {
  color: #359c42;
}
.diff-line.added .key::before {
  content: "+";
  margin-left: calc(-1ch - 4px);
  margin-right: 4px;
  font-family: monospace;
  opacity: 0.65;
}
.diff-line.removed {
  color: #ca6a6a;
}
.diff-line.removed .key::before {
  content: "-";
  margin-left: calc(-1ch - 4px);
  margin-right: 4px;
  font-family: monospace;
  opacity: 0.65;
}
.diff-line.removed .key {
  color: inherit;
}
.diff-line.removed code {
  background-color: #f3ecec;
  color: inherit;
}

.diff-value {
  padding: 2px 4px;
  border-radius: 4px;
  color: #619c5c;
  background-color: #ecf3ed;
  font-family: Consolas, monospace;
}
.diff-value.removed {
  background-color: #f3ecec;
  color: #ca6a6a;
}

.diff-rest {
  display: block;
  min-width: 100%;
  padding-left: 12px;
  font-size: 10px;
  color: #aaa;
}
